<template>
	<div class="navi">
		<div class="navleft flex-center-center">
			<img src="../assets/img/党徽.png" alt="">
			<span class="size-30 color-num weight-bold">智慧党建平台</span>
		</div>
		<div class="navright">
			<el-menu
				:default-active="activemenu"
				class="el-menu-demo"
				mode="horizontal"
				@select="handleSelect"
				text-color="#fff"
				active-text-color="#fff"
				background-color="transparent"
				:router="true"
			>
				<el-menu-item
					v-for="(item, index) in menus"
					:key="index"
					:index="item.index"
					:disabled="item.disabled"
					:route="item.route"
					:class="{ active: item.index === activemenu }"
					>{{ item.title }}</el-menu-item
				>
			</el-menu>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			activemenu: '1',
			menus: [
				{
					index: '1',
					route: '/zzgk',
					disabled: false,
					title: '组织概况',
				},
				{
					index: '2',
					route: '/dydw',
					disabled: false,
					title: '党员队伍',
				},
				{
					index: '3',
					route: '/jczz',
					disabled: false,
					title: '基层组织',
				},
				{
					index: '4',
					route: '/dwgz',
					disabled: true,
					title: '党务工作',
				},
				{
					index: '5',
					route: '/sxjs',
					disabled: true,
					title: '思想建设',
				},
				{
					index: '6',
					route: '/zbdt',
					disabled: true,
					title: '支部地图',
				},
			],
		}
	},
	mounted() {
		//手动刷新页面时，获知当前路由的index
		const r = this.menus.find((item) => {
			return item.route == this.$route.path
		})
		this.activemenu = r.index
	},
	watch: {
		// 监听路由对象$route的变化
		$route: {
			handler: function (to, from) {
				// 路由发生变化时执行的代码
				console.log('Route changed from', from.path, 'to', to.path)
			},
			// 设置为深度监听
			deep: true,
		},
	},
	methods: {
		handleSelect(key, path) {
			this.activemenu = key
		},
	},
}
</script>
<style lang="less" scoped>
.navi {
	height: 86rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(
		to right bottom,
		rgb(46, 73, 168) 0%,
		rgb(43, 33, 104) 100%
	);
	.navleft{
		padding:0 28px;
		img{
			width:36px;
			height:36px;
			margin-right:16px;
		}
		span{
			letter-spacing: 2px;
		}
	}
}
::v-deep .el-menu.el-menu--horizontal {
	border: none;
	.el-menu-item {
		width: 180px;
		height: 45px;
		line-height: 45px;
		margin-right: 10px;
		cursor: pointer;
		color: #fff;
		font-size: 24px;
		text-align: center;
		transition: none;
		&:hover {
			background-color: transparent !important ;
		}
	}
	.is-active {
		border: none;
		background-image: url(../assets/img/navbg.png);
		background-size: 100% 100%;
	}
}
</style>
